<template>

  <el-container>
    <common-head child-name="商品管理"></common-head>

    <el-row style="text-align: left; font-size: 15px; font-weight: bolder">&nbsp;</el-row>
    <el-row style="text-align: left; font-size: 17px; font-weight: bolder">&nbsp;&nbsp;&nbsp;查询条件</el-row>

    <el-main>
      <el-form :inline="true" :model="searchCommodity" ref="searchCommodity" class="demo-form-inline" style="text-align: left">

        <el-form-item prop="commodity" label="商品名称：">
          <el-input v-model="searchCommodity.commodityName" style="width: 120px"></el-input>
        </el-form-item>

        <el-form-item label="商品编码：">
          <el-input v-model="searchCommodity.commodityCode" style="width: 120px"></el-input>
        </el-form-item>

        <el-form-item label="商品分类：">
          <el-select v-model="searchCommodity.commodityCategory" style="width: 120px" placeholder="全部">
            <el-option label="大牌专区" value="大牌专区"></el-option>
            <el-option label="智能手环" value="智能手环"></el-option>
            <el-option label="智能秤" value="智能秤"></el-option>
            <el-option label="睡眠管理" value="睡眠管理"></el-option>
            <el-option label="营养健康" value="营养健康"></el-option>
            <el-option label="护理清洁" value="护理清洁"></el-option>
            <el-option label="智能手表" value="智能手表"></el-option>
            <el-option label="血压计" value="血压计"></el-option>
            <el-option label="运动户外" value="运动户外"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态：">
          <el-select  v-model="searchCommodity.commodityStatus" style="width: 120px" placeholder="全部">
            <el-option label="未上架" value=0></el-option>
            <el-option label="已上架" value=1></el-option>
            <el-option label="已下架" value=2></el-option>
            <el-option label="待审核" value=3></el-option>
            <el-option label="未通过" value=4></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <el-row style="text-align: left; font-size: 17px; font-weight: bolder">商品列表</el-row>
      <el-row>&nbsp;</el-row>

      <div>
        <el-row style="float: left">
        <el-button type="primary" @click="addCommodity">+&nbsp;新增</el-button>
        <el-button type="danger" plain:true @click="deleteCommodity">删除</el-button>
        <el-button type="primary" plain:true @click="onShelf">上架</el-button>
        <el-button type="primary" plain:true @click="offShelf">下架</el-button>
        </el-row>
      </div>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="commodityId" label="商品ID" width="120"></el-table-column>

        <el-table-column prop="commodityName" label="商品名称" width="120"></el-table-column>

        <el-table-column prop="commodityCategory" label="商品分类" width="120"></el-table-column>

        <el-table-column prop="commodityPicture" label="商品图片" width="120">
          <template slot-scope="scope">
          <img height="80px" width="80px" :src="scope.row.commodityPicture" alt="暂无图片"/>
          </template>
        </el-table-column>

        <el-table-column prop="commodityTitle" label="商品标题" width="120"></el-table-column>

        <el-table-column prop="commodityPrice" label="商品价格" width="120"></el-table-column>

        <el-table-column prop="commodityStock" label="商品库存" width="120"></el-table-column>

        <el-table-column prop="commodityStatus" label="商品状态" width="120"></el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="showCommodity(scope.$index, scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="editCommodity(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        background:true
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import commonHead from "../system/common/commonHead"
  import Crown from "../../components/Crown"
  export default {
    inject: ['reload'],
    name: "GoodsManag",
    components: {commonHead, Crown},
    data() {
      return {
        image: '',
        imageUrl: '',
        url: '',
          //当前页
        currentPage4: 1,
        pageSize: 5,
        pageNumber: 1,
        total: 5,

        //crown
        mes: {
          user_name: 'Tony',
          title: '',
          router: ['首页', '商城管理', '品类管理']
        },

        //搜索表单参数
        searchCommodity: {
          commodityName: '',
          commodityCode: '',
          commodityCategory: '',
          commodityStatus: '',
        },

        //数据展示表格
        tableData: []
      }
    },

    mounted(){
      this.created();
    },

    methods: {

      //获取页面数据
      getData(){
        this.axios.get("micro-mall-server/commodity/getByPage", {
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
          }}).then(res => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          // this.reload();
        })
      },

      created(){
        this.getData();
      },

      //重置查询条件
      reset(){
        this.searchCommodity.commodityName = '';
        this.searchCommodity.commodityCode = '';
        this.searchCommodity.commodityStatus = '';
        this.searchCommodity.commodityCategory = '';
      },

      //条件查询
      search(){
        this.axios.get("micro-mall-server/commodity/getByPage", {params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            ...this.searchCommodity
          }
        }).then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;

          // this.reload();
        })
      },

      //添加商品
      addCommodity(){
        this.$router.push({
          path: '/main/addCommodity',
        })
      },

      //编辑商品信息，跳转
      editCommodity(index, row){
        this.$router.push({
          path: '/main/editCommodity',
          query: {
            commodityId: row.commodityId
          }
        })
      },

      //查看商品信息
      showCommodity(index, row){
        this.$router.push({
          path: '/main/showCommodity',
          query: {
            commodityId: row.commodityId
          }
        })
      },

      //删除商品***
      deleteCommodity(){
        var selected = this.$refs.multipleTable.selection;
        if(selected === null){
          console.log("空");
          this.$message({
            type: 'info',
            message: '未选中',
          });
          return;
        }

        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.axios.patch("micro-mall-server/commodity/" + selected.commodityId + 5).then(res => {
            console.log(res.data);
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
      },

      //上架商品（仅修改商品状态）
      onShelf(){
        this.$confirm('确定上架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '上架成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架',
          });
        });
      },

      //下架商品
      offShelf() {
        this.$confirm('确定下架?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '下架成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架',
          });
        });
      },

      //处理选择信息变更
      handleSelectionChange(){
        console.log('select');
      },

      //分页处理，当前页
      handleCurrentChange(val){
        console.log(`当前页：${val}`);

        this.pageNumber = val;
        this.getData();
      },
      //分页处理，页大小
      handleSizeChange(val){
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getData();
      }
    },
  }

</script>

<style scoped>

</style>
